import { Suspense,useEffect } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import router from './router/router';

import { message } from 'antd'
import request from './utils/request'


function App() {

  const [messageApi, messageContextHolder] = message.useMessage()
  useEffect(() => {

    request.setMessageApi(messageApi)
  },[messageApi])

  // 由于路由组件是懒加载的，渲染页面可能会有延迟，使用Suspense 可优化交互
  const RouteEleMent = (route: IRouteType.IRouer): React.ReactNode => {
    if (!route.element) {
      return null;
    }
    return (
      <Suspense fallback={<div> 加载中...</div>}>
        <route.element />
      </Suspense>
    );
  };
  // 通过每个路由对象渲染Route
  const RouteItem = (route: IRouteType.IRouer) => {
    return (
      <Route key={route.name} element={RouteEleMent(route)} path={route.path}>
        {RouteList(route.children ?? [])}
      </Route>
    );
  };
  // 根据配置的routeconfig 生成Route
  const RouteList = (list: IRouteType.IRouer[]) => {
    return list.map((item) => RouteItem(item));
  };

  return (
    <>
      {messageContextHolder}
      <BrowserRouter>
        <div className="App">
          <Routes>
          {/* <Route element={Dashboard()} path="/">
            <Route element={MenuLeft()} path="menu"></Route>
          </Route>
          <Route element={Profile()} path="/profile"></Route> */}
          {RouteList(router)}
          </Routes>
        </div>
      </BrowserRouter>
    </>
  );
}

export default App;
